<template>
	<view class="inviteFriends">
		<view class="backImg">
			<view class="backImg-left">
				<view @tap="back" class="backImg-left">
					<image src="@/static/detail/back.png" mode="widthFix"></image>
				</view>
			</view>
			<view>邀请好友</view>
			<view class="backImg-right"></view>
		</view>
		<image class="inviteFriendsImg" v-show="imgBlobData != ''" :src="imgBlobData" mode="scaleToFill"></image>
		<view class="main" id="share">
			<view class="content">
				<image class="avatar" :src="userData.avatarUrl" mode="scaleToFill"></image>
				<view class="name">{{userData.name}}</view>
				<view class="InvitationCode" v-if="codeStr">
					<text>您的专属邀请码</text>
					<view class="code">
						<text class="number">{{codeStr}}</text>
						<text class="copy" @tap="copy()">复制</text>
					</view>
				</view>
				<view class="codeImg">
					<view class="box">
						<canvas id="qrcode" canvas-id="qrcode" />
					</view>
				</view>
			</view>
		</view>
		<view class="preservation">
			<button type="default">长按上方图片保存</button>
		</view>
		
		<u-popup :show="modeShow" bg-color="#fff" :round="10" :customStyle="{width:'620upx'}" mode="center">
			<view class="register-success">
				<view class="title">邀请次数已用完</view>
				<view class="bottm" @tap="back">关闭邀请</view>
			</view>
		</u-popup>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {mapState ,mapMutations} from 'vuex'; 
	import html2canvas from "html2canvas";
	import uQRCode from '@/common/uqrcode.js'
	import {
		getUsedCode,
		getReferralCode,
	} from '@/api/user.js'
	export default {
		data() {
			return {
				modeShow:false,
				imgBlobData:"",
				codeStr:""
			}
		},
		onShow() {
			this.getCode();
		},
		methods: {
			getCode(){
				getUsedCode({}).then(res => {
					if (res.data.success) {
						let arr = [];
						res.data.obj.forEach(im=>{
							arr.push(im.id);
						});
						getReferralCode({ids:arr.join(",")}).then(res => {
							if (res.data.success) {
								this.codeStr = res.data.obj.referralCode;
								this.$nextTick(()=>{
									this.shareFx();
								});
							}else{
								this.modeShow = true;
							}
						});
					}
				});
			},
			copy(){
				uni.setClipboardData({
				 	data: this.codeStr,
				    success: ()=> {
						this.$u.toast('复制成功！');
				    }
				});
			},
			// 生成图片
			async goPoster() {
				this.download();
			},
			async download() {
				const convertToImage = (container, options = {}) => {
					// 设置放大倍数
					const scale = window.devicePixelRatio;
					// 传入节点原始宽高
					const _width = container.offsetWidth;
					const _height = container.offsetHeight;
					// html2canvas配置项
					const ops = {
						width: _width - 2,
						height: _height - 2,
						useCORS: true,
						x: 1,
						y: 1,
						// allowTaint: false,
						dpi: 300,
						scale
						//   ...options,
					};
					return html2canvas(container, ops).then((canvas) => {
						// 返回图片的二进制数据
						return canvas.toDataURL("image/png");
					});
				};
				const imgBlobData = await convertToImage(document.querySelector('#share'));
				this.imgBlobData = imgBlobData;
			},
			async shareFx() {//生成分享二维码
				let urls = location.origin;
				setTimeout(() => {
					let modules = uQRCode.getModules({
						text: urls[0]+"/pages/login/register?code="+this.codeStr,
						errorCorrectLevel: uQRCode.errorCorrectLevel.L
					})
					let tileSize = 4;
					// 获取绘图所需的上下文
					let ctx = uni.createCanvasContext('qrcode', this)
					// 开始绘制
					ctx.setFillStyle('#FFFFFF')
					ctx.fillRect(0, 0, 67, 67);
					for (var row = 0; row < modules.length; row++) {
						for (var col = 0; col < modules.length; col++) {
							// 计算每一个小块的位置
							var x = col * tileSize
							var y = row * tileSize
							var w = tileSize
							var h = tileSize
			
							var style = modules[row][col] ? '#000000' : '#FFFFFF'
							ctx.setFillStyle(style)
							ctx.fillRect(x, y, w, h)
						}
					}
					ctx.draw();
					this.goPoster();
					return;
				}, 200)
			},
			back() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
		},
		computed:{
			...mapState(["hasLogin","uerInfo"]),
			userData(){
			  let data = {};
			  if(this.$store.state.hasLogin && this.$store.state.uerInfo){
				data = this.$store.state.uerInfo;
				data["avatarUrl"] = data.headPortraitUrl?this.pathImg+data.headPortraitUrl:require("@/static/detail/avatar.png");
				data["name"] = data.nickname?data.nickname:"第"+data.id+"位数字藏家";
			  }
			  return data;
			},
		},
	}
</script>

<style lang="less" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.inviteFriends{
		width: 100%;
		height: 100%;
		.register-success {
			width: 100%;
			height: 360upx;
			padding: 0 32upx;
			.bottm{
				text-align: center;
				color: #fff;
				font-size: 24upx;
				height: 60upx;
				line-height: 60upx;
				margin-top:120upx;
				background-color: #2b267f;
				border-radius: 10upx;
			}
			.title{
				margin-top: 80upx;
				font-size: 40upx;
				text-align: center;
				color: #2C1769;
			}
		}
		.inviteFriendsImg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
		.main{
			width: 100%;
			height: 100%;
			background-image: url('@/static/user/bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 0 60upx;
			padding-top: 340upx;
			.content{
				background-color: #fff;
				height: 746upx;
				border-radius: 20upx;
				text-align: center;
				padding-top: 60upx;
				.codeImg{
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;
					text-align: center;
					.box{
						width: 216upx;
						height: 216upx;
					}
				}
				.InvitationCode{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 50upx;
					.code{
						height: 48upx;
						display: flex;
						align-items: center;
						background-color:#fbece7;
						border-radius: 10upx;
						padding-left: 19upx;
						padding-right:8upx;
						position: relative;
						z-index: 3;
						.number{
							display: inline-block;
							line-height: 48upx;
							font-size: 28upx;
							color: #333;
						}
						.copy{
							display: inline-block;
							padding: 0 10upx;
							height: 38upx;
							text-align: center;
							line-height: 38upx;
							background: #E74F22;
							border-radius: 10upx;
							color: #fff;
							font-size: 20upx;
							margin-left: 18upx;
						}
					}
					>text{
						font-size: 28upx;
						color: #333;
						margin-right: 20upx;
					}
				}
				.name{
					font-size: 32upx;
					line-height: 32upx;
					color: #333;
					margin-bottom: 58upx;
				}
				.avatar{
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
					margin-bottom: 28upx;
				}
			}
		}
		.preservation{
			width: 100%;
			height: 80upx;
			border-radius: 40upx;
			position: fixed;
			left: 0;
			bottom: 40upx;
			padding: 0 60upx;
			z-index: 3;
			button{
				width: 100%;
				height: 100%;
				background: linear-gradient(95deg, #FA542E, #D30211);
				border-radius: 40upx;
				padding: 0;
				font-size: 32upx;
				line-height: 80upx;
				border: 0 none;
				color: #fff;
			}
			button::after{border: 0 none;}
		}
	}
	.backImg {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		padding: 40upx;
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
		.backImg-left {
			display: flex;
			align-items: center;
	
			image {
				width: 20upx;
				height: 45upx;
			}
		}
	
		.backImg-right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
	
			image {
				width: 44upx;
				height: 36upx;
				margin-left: 10upx;
			}
	
			.share {
				width: 36upx;
				height: 36upx;
			}
		}
	}
</style>
